<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<!-- ios私有meta类 -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	
	
	<!--引用SUI Modle资源-->
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm-extend.min.css">
	
		
	<!--引入本地文件-->
	<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="css/normalize.css" type="text/css">
	<link rel="stylesheet" href="css/cash_area.css" type="text/css">

	
	<title>现金劵</title>
</head>
<body>
	<div class="page">
		<!--页面头部-->
		<header class="bar bar-nav">
			<a href="cart.html" class="icon icon-left pull-left external"></a>
			<h1 class="title">现金劵</h1>
			<a href="index.html" class="icon icon-home pull-right external"></a>
		</header>
		
		<!--主要部分 开始-->
		<div class="content">
			<!--标签页 开始-->
			<div class="buttons-tab">
				<a href="#tab1" class="tab-link active button">未使用</a>
				<a href="#tab2" class="tab-link button">已使用</a>
				<a href="#tab3" class="tab-link button">已过期</a>
			</div>
			<div class="content-block">
				<div class="tabs">
					<div id="tab1" class="tab active">
						<div class="">
							<!--未使用样式-->
							<div class="cash-use" id="usable_1" onclick="location.href='cash_part.html'">
								<div class="cu-left" name="left">
									<p>￥<span>10</span></p>
								</div>
								<div class="cu-middle" name="middle">
									<p>（满99.00元可使用）全场通用。</p>
								</div>
								<div class="cu-right" name="right">
									<p style="text-align: left;">将于<span>2015.11.28.21:00</span>过期</p>
								</div>
							</div>
							<!--未使用样式-->
						</div>
					</div>
					<div id="tab2" class="tab">
						<div class="content-block">
							<!--已使用样式-->
							<div class="cash-use" id="used_1">
								<div class="cu-left" name="left">
									<p>￥<span>10</span></p>
								</div>
								<div class="cu-middle" name="middle">
									<p>（满99.00元可使用）全场通用。</p>
								</div>
								<div class="cu-right" name="right">
									<p>已使用</p>
								</div>
							</div>
							<!--已使用样式-->
						</div>
					</div>
					<div id="tab3" class="tab">
						<div class="content-block">
							<!--已过期样式-->
							<div class="cash-use" id="overdue_1">
								<div class="cu-left" name="left">
									<p>￥<span>10</span></p>
								</div>
								<div class="cu-middle" name="middle">
									<p>（满99.00元可使用）全场通用。</p>
								</div>
								<div class="cu-right" name="right">
									<p>已过期</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--标签页 结束-->
		</div>
		<!--主要部分 结束-->
	</div>
	
	
	<!--引用SUI Modle资源-->
	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm-extend.min.js' charset='utf-8'></script>

</body>
</html>